<template>
  <div class="addContent_wrap clearfix">
    <el-form label-width="100px" ref="form" :model="form" :rules="rules">
      <div class="left clearfix">
        <ul>
          <li>
            <el-form-item label="标题：" prop="title">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="排序：" class="flex">
              <el-input-number v-model="form.sort"></el-input-number>
              <el-checkbox v-model="hotStatus">热门</el-checkbox>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="外链：" class="flex">
              <el-input v-model="form.outerChain"></el-input>
              <el-checkbox v-model="isOuter">是</el-checkbox>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="栏目：">
              <treeselect
                class="treeSelect"
                :options="columnData"
                :clearable="false"
                v-model="form.columnId"
                :normalizer="normalizer"
                placeholder="请选择栏目"
              />
            </el-form-item>
          </li>
          <li>
            <el-form-item label="副标题1：">
              <el-input v-model="form.subtitleOne"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="副标题2：">
              <el-input v-model="form.subtitleTwo"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="副标题3：">
              <el-input v-model="form.subtitleThree"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="副标题4：">
              <el-input v-model="form.subtitleFour"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="价格：">
              <el-input v-model="form.price"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item label="市场价：">
              <el-input v-model="form.marketPrice"></el-input>
            </el-form-item>
          </li>
          <li class="full">
            <el-form-item label="查看经纪人：">
              <el-select v-model="form.classify" placeholder="请选择">
                <el-option
                  v-for="item in classifyList"
                  :key="item.itemValue"
                  :label="item.itemText"
                  :value="item.itemValue"
                >
                </el-option>
              </el-select>
              <span class="red">*大于此等级以上均可查看</span>
            </el-form-item>
          </li>
          <li class="full">
            <el-form-item label="摘要：">
              <el-input v-model="form.remark" type="textarea"></el-input>
            </el-form-item>
          </li>
        </ul>
      </div>
      <div class="right clearfix">
        <div class="pc" v-if="!contentId">
          <el-upload
            action=""
            list-type="picture-card"
            :auto-upload="false"
            :on-change="selPcNew"
            :on-remove="remPcNew"
            :limit="1"
            class="upload_wrap"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div>PC封面图</div>
        </div>
        <div class="pc" v-else>
          <el-upload
            ref="uploadPc"
            :action="ImgUrl"
            :headers="parmas"
            :data="pcData"
            :limit="1"
            :file-list="filelistPc"
            :on-success="successPc"
            :on-remove="remEncOnePc"
            list-type="picture-card"
            class="upload_wrap"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div>PC封面图</div>
        </div>
        <div class="wx" v-if="!contentId">
          <el-upload
            action=""
            list-type="picture-card"
            :auto-upload="false"
            :data="wxData"
            :limit="1"
            :on-change="selWxNew"
            :on-remove="remWxNew"
            class="upload_wrap"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div>微信端封面图</div>
        </div>
        <div class="wx" v-else>
          <el-upload
            ref="uploadWx"
            list-type="picture-card"
            :action="ImgUrl"
            :headers="parmas"
            :data="wxData"
            :limit="1"
            :file-list="filelistWx"
            :on-remove="remEncOneWx"
            :on-success="successWx"
            class="upload_wrap"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div>微信端封面图</div>
        </div>
      </div>
      <div
        class="edit_wrap"
        v-loading="quillUpdateImg"
        element-loading-text="拼命上传中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <!-- 图片上传组件辅助-->
        <el-upload
          class="avatar-uploader"
          :action="serverUrl"
          name="file"
          :headers="header"
          :show-file-list="false"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          :before-upload="beforeUpload"
        >
        </el-upload>

        <quill-editor
          ref="myQuillEditor"
          v-model="form.content"
          :options="editorOption"
          style="height:300px;"
          @blur="onEditorBlur($event)"
          @focus="onEditorFocus($event)"
          @change="onEditorChange($event)"
        ></quill-editor>
      </div>
      <div class="item_footer">
        <div class="newAdd" v-if="!contentId">
          <el-form-item label="文件相关：">
            <el-upload
              class="upload-demo enclo"
              action=""
              :limit="1"
              :auto-upload="false"
              :on-change="selNewEnc"
              :on-remove="remNewEnc"
              :on-exceed="handleExceed"
            >
              <span slot="tip" class="el-upload__tip">单附件：</span>
              <el-button type="text" v-no-more-click>点击上传</el-button>
            </el-upload>
            <el-upload
              class="upload-demo enclo"
              action=""
              multiple
              :auto-upload="false"
              :on-change="selNewEncMuc"
              :on-remove="remNewEncMuc"
              :on-exceed="handleExceed"
            >
              <span slot="tip" class="el-upload__tip">多附件：</span>
              <el-button type="text" v-no-more-click>点击上传</el-button>
            </el-upload>
          </el-form-item>
        </div>
        <div class="newAdd" v-else>
          <el-form-item label="文件相关：">
            <el-upload
              class="upload-demo enclo"
              ref="uploadOdd"
              :action="ImgUrl"
              :headers="parmas"
              :data="oddData"
              :limit="1"
              :file-list="filelistOdd"
              :on-success="successOdd"
              :on-remove="remEncOneOdd"
            >
              <span slot="tip" class="el-upload__tip">单附件：</span>
              <el-button type="text" v-no-more-click>点击上传</el-button>
            </el-upload>
            <el-upload
              class="upload-demo enclo"
              :action="uploadMany"
              :headers="parmas"
              :data="manyData"
              :file-list="filelistMany"
              :on-remove="remEncMany"
              :on-success="successMany"
              :before-remove="beforeRemove"
            >
              <span slot="tip" class="el-upload__tip">多附件：</span>
              <el-button type="text" v-no-more-click>点击上传</el-button>
            </el-upload>
          </el-form-item>
        </div>
      </div>
      <div class="item_footer">
        <el-form-item label="关键词：" class="left_text">
          <el-input v-model="form.keyword"></el-input>
          <span class="red">多个词请用","隔开</span>
        </el-form-item>
      </div>
      <div class="item_footer">
        <el-form-item label="描述：">
          <el-input v-model="form.contentDescribe" type="textarea"></el-input>
        </el-form-item>
      </div>
      <div class="item_footer">
        <el-form-item label="关联进件：" style="text-align: left">
          <el-select v-model="form.projectId" placeholder="请选择">
            <el-option
              v-for="item in findProjectList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer clearfix">
      <el-button @click="closeDia" v-no-more-click>取 消</el-button>
      <el-button type="primary" @click="submit" v-no-more-click>提交</el-button>
    </div>
  </div>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";
import { addQuillTitle } from "@/assets/js/quill-title.js";
import * as Quill from "quill";
let fontSizeStyle = Quill.import("attributors/style/size");
import {
  getColumnList,
  getAstatus,
  getContentOne,
  delColumnEnc,
  delColumnMany,
  updateContent,
  getFindProject
} from "../../../src/assets/js/api";
fontSizeStyle.whitelist = [
  "10px",
  "12px",
  "14px",
  "16px",
  "20px",
  "24px",
  "36px",
  false
]; //false表示默认值
Quill.register(fontSizeStyle, true);
export default {
  name: "AddContent",
  components: {
    Treeselect,
    quillEditor
  },
  props: ["contentId", "getList"],
  data() {
    return {
      serverUrl: "",
      header: {},
      quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
      columnData: [],
      form: {
        sort: 1,
        projectId: null,
        classify: null
      },
      isOuter: false,
      hotStatus: false,
      classifyList: [],
      content: "",
      MmltiFile: [],
      parmas: {
        COOKIE_TOKEN: ""
      },
      pcData: {
        uploadType: 1,
        id: null
      },
      wxData: {
        uploadType: 2,
        id: null
      },
      oddData: {
        uploadType: 3,
        id: null
      },
      manyData: {
        id: null
      },
      ImgUrl: "",
      uploadMany: "",
      filelistPc: [],
      filelistWx: [],
      filelistOdd: [],
      filelistMany: [],
      findProjectList: [],
      find: [{ id: null, name: "不关联" }],
      editorOption: {
        modules: {
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
              ["blockquote", "code-block"], // 引用  代码块
              [{ header: 1 }, { header: 2 }], // 1、2 级标题
              [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
              [{ script: "sub" }, { script: "super" }], // 上标/下标
              [{ indent: "-1" }, { indent: "+1" }], // 缩进
              // [{'direction': 'rtl'}],                         // 文本方向
              [{ size: ["small", false, "large", "huge"] }], // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
              [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
              [{ font: [] }], // 字体种类
              [{ align: [] }], // 对齐方式
              ["clean"], // 清除文本格式
              ["link", "image", "video"] // 链接、图片、视频
            ],
            // container: "#toolbar",
            handlers: {
              image: function(value) {
                if (value) {
                  // 触发input框选择图片文件
                  document.querySelector(".avatar-uploader input").click();
                } else {
                  this.quill.format("image", false);
                }
              }
            }
          }
        }
      },
      normalizer(node) {
        //去掉children=[]的children属性
        if (node.children == null) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.label,
          children: node.children
        };
      },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "change" }]
      }
    };
  },
  created() {
    this.getColumnList();
    this.getAstatus();
    this.getContent();
    this.findProject();
    this.serverUrl = `${this.axios.defaults.baseURL}/sys/content/upload`;
    let token = localStorage.getItem("token");
    this.header.COOKIE_TOKEN = token;
  },
  mounted() {
    addQuillTitle();
  },
  methods: {
    //获取栏目
    getColumnList() {
      getColumnList().then(res => {
        let arr = [];
        
        arr[0] = res.data[0];
        this.columnData = arr;
      });
    },
    //获取产品
    findProject() {
      getFindProject().then(res => {
        this.findProjectList = this.find.concat(res.data);
      });
    },
    //获取内容
    getContent() {
      if (this.contentId) {
        this.pcData.id = this.contentId;
        this.wxData.id = this.contentId;
        this.oddData.id = this.contentId;
        this.manyData.id = this.contentId;
        this.ImgUrl = `${this.axios.defaults.baseURL}/sys/content/singleUpload`;
        this.uploadMany = `${this.axios.defaults.baseURL}/sys/content/manyUpload`;
        this.parmas.COOKIE_TOKEN = localStorage.getItem("token");
        getContentOne(this.contentId).then(res => {
          this.form = res.data.content;
          //判断热门状态
          this.hotStatus = this.form.hotStatus == 1 ? true : false;
          this.isOuter = this.form.isOuter == 1 ? true : false;
          //判断是否有pc封面图片
          let arrPc = {};
          if (res.data.content.pcCoverImg) {
            arrPc.url = res.data.content.pcCoverImg;
            this.filelistPc.push(arrPc);
          }  
          //判断是否有wx封面图
          let arrWx = {};
          if (res.data.content.wxCoverImg) {
            arrWx.url = res.data.content.wxCoverImg;
            this.filelistWx.push(arrWx);
          }
          //判断是否有单附件
          let arrOdd = {};
          if (res.data.content.singleAccessory) {
            if (res.data.content.showAccessory !== null) {
              arrOdd.name = res.data.content.showAccessory;
            } else {
              arrOdd.name = res.data.content.singleAccessory;
            }
            this.filelistOdd.push(arrOdd);
          }
          //判断是否有多附件
          if (res.data.manyAccessory) {
            this.filelistMany = res.data.manyAccessory;
            this.filelistMany.map(item => {
              if (item.showAccessory !== null) {
                item.name = item.showAccessory;
              } else {
                item.name = item.accessoryUrl;
              }
            });
          }
        });
      }
    },
    //获取字典
    getAstatus() {
      //查询归类字典
      getAstatus("classification").then(res => {
        let classify = [{ itemValue: null, itemText: "不限" }];
        let arr = res.data;
        arr.map(item => {
          item.itemValue = parseInt(item.itemValue);
        });
        this.classifyList = classify.concat(arr);
      });
    },
    handleExceed() {
      this.$message.warning("只允许上传一个附件");
    },
    //新增 上传PC封面
    selPcNew(file) {
      this.form.pcCoverFile = file.raw;
    },
    remPcNew() {
      this.form.pcCoverFile = "";
    },
    //新增 上传Wx封面
    selWxNew(file) {
      this.form.wxCoverFile = file.raw;
    },
    remWxNew() {
      this.form.wxCoverFile = "";
    },
    //新增 上传单附件
    selNewEnc(file) {
      this.form.singleFile = file.raw;
    },
    remNewEnc() {
      this.form.singleFile = null;
    },
    //新增 上传多附件
    selNewEncMuc(file, fileList) {
      this.MmltiFile = fileList;
    },
    remNewEncMuc(file, fileList) {
      this.MmltiFile = fileList;
    },
    //删除单附件
    delColumnEnc(id, uploadType) {
      delColumnEnc({ id: id, uploadType: uploadType }).then(res => {
        if (res.code == 200) {
          this.$message.success(res.message);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    remEncOnePc() {
      this.delColumnEnc(this.contentId, 1);
    },
    remEncOneWx() {
      this.delColumnEnc(this.contentId, 2);
    },
    remEncOneOdd() {
      this.delColumnEnc(this.contentId, 3);
    },
    //多附件删除
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    remEncMany(file) {
      delColumnMany(file.id).then(res => {
        if (res.code == 200) {
          this.$message.success(res.message);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    fileListPush(obj, res) {
      obj.push({
        id: res.data[0].id
      });
    },
    //单附件上传成功
    successOdd(res, file) {
      if (file.response.code == 200) {
        this.$message.success(file.response.message);
      } else {
        this.$message.warning(file.response.message);
        this.filelistOdd = [];
      }
    },
    successPc(res, file) {
      if (file.response.code == 200) {
        this.$message.success(file.response.message);
      } else {
        this.$message.warning(file.response.message);
        this.filelistPc = [];
      }
    },
    successWx(res, file) {
      if (file.response.code == 200) {
        this.$message.success(file.response.message);
      } else {
        this.$message.warning(file.response.message);
        this.filelistWx = [];
      }
    },
    //多附件上传
    successMany(res, file, fileList) {
      let fileListOld = JSON.parse(JSON.stringify(this.filelistMany));
      if (file.response.code == 200) {
        this.$message.success(file.response.message);
        fileList.forEach(item => {
          if (!item.id) {
            item.id = res.data[0];
          }
        });
        this.filelistMany = fileList;
      } else {
        this.$message.warning(file.response.message);
        this.filelistMany = fileListOld;
      }
    },
    onEditorBlur() {
      //失去焦点事件
    },
    onEditorFocus() {
      //获得焦点事件
    },
    onEditorChange() {
      //内容改变事件
    },
    // 富文本图片上传前
    beforeUpload() {
      // 显示loading动画
      this.quillUpdateImg = true;
    },

    uploadSuccess(res) {
      // res为图片服务器返回的数据
      // 获取富文本组件实例
      let quill = this.$refs.myQuillEditor.quill;
      // 如果上传成功
      if (res.code == 200) {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片  res.url为服务器返回的图片地址
        quill.insertEmbed(length, "image", res.data);
        // 调整光标到最后
        quill.setSelection(length + 1);
      } else {
        this.$message.error("图片插入失败");
      }
      // loading动画消失
      this.quillUpdateImg = false;
    },
    // 富文本图片上传失败
    uploadError() {
      // loading动画消失
      this.quillUpdateImg = false;
      this.$message.error("图片插入失败");
    },
    //取消按钮
    closeDia() {
      this.$emit("dialogCol", false);
    },
    //新增内容
    newAddContetnt() {
      let that = this;
      this.form.hotStatus = this.hotStatus ? 1 : 0;
      this.form.isOuter = this.isOuter ? 1 : 0;
      const formData = new FormData();
      Object.keys(this.form).forEach(key => {
        formData.append(key, this.form[key]);
      });
      for (let i = 0; i < this.MmltiFile.length; i++) {
        formData.append("manyFiles", this.MmltiFile[i].raw);
      }
      this.axios
        .post("/sys/content/save", formData, {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        })
        .then(function(res) {
          if (res.data.code == 200) {
            that.$message({
              message: res.data.message,
              type: "success"
            });
            that.$emit("dialogCol", false);
            that.getList();
          } else {
            that.$message({
              message: res.data.message,
              type: "error"
            });
          }
        })
        .catch(function(error) {
          that.$message({
            message: error.message,
            type: "error"
          });
        });
    },
    //修改内容
    updateContetn() {
      this.form.hotStatus = this.hotStatus ? 1 : 0;
      this.form.isOuter = this.isOuter ? 1 : 0;
      updateContent(this.form).then(res => {
        if (res.code == 200) {
          this.$message.success(res.message);
          this.$emit("dialogCol", false);
          this.getList();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //提交按钮
    submit() {
      if (this.contentId) {
        this.$refs.form.validate().then(() => {
          if (this.form.projectId == null) {
            delete this.form.projectId;
          }
          if (this.form.classify == null) {
            delete this.form.classify;
          }
          this.updateContetn();
        });
      } else {
        this.$refs.form.validate().then(() => {
          if (this.form.projectId == null) {
            delete this.form.projectId;
          }
          if (this.form.classify == null) {
            delete this.form.classify;
          }
          this.newAddContetnt();
        });
      }
    }
  }
};
</script>

<style scoped type="less">
.el-form-item__content
{
    text-align: left;
}
.left_text
{
    text-align: left;
}
.red
{ font-size: 12px;

    color: red; 
}
.left
{
    float: left;  width: 70%;
}
.left li
{ float: left;

    width: 50%; 
}
.left li.full
{
    width: 100%;
}
.left li.full ::v-deep.el-form-item__content
{
    text-align: left;
}
.left .el-form-item
{
    margin-bottom: 16px;
}
.flex ::v-deep.el-form-item__content
{
    display: flex;
}
.flex .el-checkbox
{
    margin-left: 10px;
}
.left ::v-deep.el-form-item__label,
.left ::v-deep.el-form-item__content,
.left ::v-deep.el-input__inner
{ line-height: 32px;

    height: 32px; 
}
.left ::v-deep.el-input__icon
{
    line-height: 32px;
}
.left ::v-deep.vue-treeselect__control
{ line-height: 30px;

    height: 30px; 
}
.left ::v-deep.vue-treeselect__placeholder
{
    line-height: 28px;
}
.left ::v-deep.vue-treeselect__single-value
{
    line-height: 30px;
}
.left .full ::v-deep.el-form-item__label,
.left .full ::v-deep.el-form-item__content
{ line-height: unset;

    height: unset; 
}
.left ::v-deep.el-input-number .el-input__inner
{
    padding: unset;
}
.left ::v-deep.el-input-number
{
    line-height: 30px;
}
.left ::v-deep.el-input-number__decrease,
.left ::v-deep.el-input-number__increase
{
    width: 28px;
}
.right
{
    float: right;  width: 22%;
}
.edit_wrap
{ float: left;  box-sizing: border-box; 
    width: 100%;  margin-bottom: 10px;
}
.edit_wrap ::v-deep.ql-container
{
    height: calc(100% - 66px);
}
.edit_wrap ::v-deep.ql-toolbar
{
    text-align: left;
}
.dialog-footer
{ clear: both;

    width: 100%; 
}
.item_footer
{ clear: both;

    width: 100%; 
}
.pc,
.wx
{
    position: relative;
}
.upload_wrap ::v-deep.el-upload
{
    position: absolute;  z-index: 1;
 top: 0;  left: 0; 
}
.upload_wrap ::v-deep.el-upload-list
{
    position: absolute;  z-index: 2;
 top: 0;  left: 0; 
}
.upload_wrap
{ position: relative;

    height: 150px; 
}
.enclo
{
    text-align: left;
}
.enclo .el-upload__tip
{ line-height: 40px;  display: inline-block; 
    float: left;  height: 40px;  margin-top: unset;
}

</style>

<style>
.editor
{
    line-height: normal !important;  height: 800px;
}
.ql-snow .ql-tooltip[data-mode='link']::before
{
    content: '请输入链接地址:';
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after
{ padding-right: 0;
 content: '保存'; 

    border-right: 0; 
}

.ql-snow .ql-tooltip[data-mode='video']::before
{
    content: '请输入视频地址:';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='10px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='10px']::before
{
    content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='12px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='12px']::before
{
    content: '12px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='14px']::before
{
    content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='16px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before
{
    content: '16px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='20px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='20px']::before
{
    content: '20px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='24px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='24px']::before
{
    content: '24px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='36px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='36px']::before
{
    content: '36px';
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before
{
    content: '文本';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before
{
    content: '标题1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before
{
    content: '标题2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before
{
    content: '标题3';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before
{
    content: '标题4';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before
{
    content: '标题5';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before
{
    content: '标题6';
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before
{
    content: '标准字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before
{
    content: '衬线字体';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before
{
    content: '等宽字体';
}

</style>
